Kayak.com Time Slider
Overview Kayak.com is a “travel search engine” that aggregates results from hundreds of different travel websites. This generates a ton of information, so the challenge is to present it in an easily navigable way. We analyzed the time sliders that allow users to specify takeoff and landing times for their flights. Structure of the Interaction * 1. The time sliders are instantiated and stored in a global array called allTimeSliders. The sliders are inserted into the appropriate by using drawInto(id). The tag names follow this template: leg0TakeoffDiv. * 2. The sliders for choosing the landing times default to display:none. When the corresponding checkbox is toggled (detected using the onclick trigger), the event handler changes the slider’s display status. * 3. Each slider has a callback function associated with it when the slider is instantiated. When the slider is moved, this callback function is executed. For the time sliders, the callback function is time_slider_change(). * 4. When the slider is moved (detected using the onclick trigger), the event handler (onChangeByClick(event)) calls a function that updates the slider’s values. * 5. The callback function is then executed: ** a. If the slider is finished moving (the mouse has been released), proceed to Step 5. ** b. If the slider is still moving, update the time displayed under the slider. * 6. The search results are then filtered (using updateTable()) according to the new flight timings. ** a. Display the status message “Updating results…” while filtering. The message box is a with display:none. The callback function changes the box’s display status to show and hide the message. Browser/Server Relationship A single query is executed when a user first searches for a flight. These results (up to nearly 1000) are cached in an array. Thus, the browser does not have to query the server each time a user filters the results by airline or flight timings. Kayak uses some pre-fetching to hide latency. It lists the sources it has finished crawling and displays these intermediate results. jQuery The slider is a general-purpose component that is part of jQuery UI. jQuery is a lightweight JavaScript library that simplifies common interactions between JS and HTML, such as DOM manipulations, event handling, and UI effects. To use the slider, Kayak only had to implement the desired callback function. All other updates of the slider’s state are handled by jQuery’s slider code. Kayak also uses jQuery for DOM manipulations. As mentioned earlier, flight information is fetched from the server once when the query is first executed. jQuery facilitates access to this information so the page does not have to be refreshed when a user filters the results. Problems with/improvements to the Web Unlike standard form elements, like checkboxes, there is no trigger for moving a slider. The jQuery UI had to define when the slider started moving, when it stopped moving, and figure out how far it moved based on mouse positions. The application is built using two layers. The first layer has the core slider utilities. The second layer is Kayak customization of it. A layered architecture like this suffers from the fact that there is no clear paradigm to define interactions between the layers unlike Java. For example, whenever the slider is updated in the utilities layer it has to convey its value to the filter in the customization layer. One of the challenges that we faced, and is a general problem in reverse engineering, is understanding the naming scheme. It is very difficult to figure out but is a key to understanding the code since most of it is hard-coded based on it. Whenever the scheme changes, the code is rendered useless and undecipherable if you don't understand it. This problem is further magnified for dynamically generated names. Relevance to Other Interactions Sliders are useful in a broad class of interactions. Some examples include: * e-Banking Instead of having a drop down menu for dates which filter the transactions having a slider will make it easier for the user to narrow the transactions in a specific range. * News sites Filter news stories for a particular range of dates. * Shopping Filter products based on a range of prices.